<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据流设计 - 异烟酸生产收率预测系统</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <link rel="stylesheet" href="styles/common.css">
    <link rel="stylesheet" href="styles/components.css">
    <link rel="stylesheet" href="styles/main-nav.css">
</head>
<body>
    <div class="app-container">
        <!-- 侧边栏 -->
        <div class="sidebar">
            <div class="logo">
                <img src="img/python-logo.png" alt="Python工业预测模型Logo">
                <span>异烟酸生产收率预测</span>
            </div>
            <nav class="nav-menu">
                <a href="index.html" class="nav-item">
                    <i class="fas fa-home"></i>
                    <span>首页</span>
                </a>
                <a href="qd-display.html" class="nav-item">
                    <i class="fas fa-tachometer-alt"></i>
                    <span>主控面板</span>
                </a>
                <a href="model-value.html" class="nav-item">
                    <i class="fas fa-chart-line"></i>
                    <span>模型应用价值</span>
                </a>
                <a href="system-architecture.html" class="nav-item">
                    <i class="fas fa-project-diagram"></i>
                    <span>系统架构设计</span>
                </a>
                <a href="data-flow.html" class="nav-item active">
                    <i class="fas fa-database"></i>
                    <span>数据流设计</span>
                </a>
                <a href="model-deployment.html" class="nav-item">
                    <i class="fas fa-cogs"></i>
                    <span>模型部署与应用</span>
                </a>
                <a href="ui-design.html" class="nav-item">
                    <i class="fas fa-desktop"></i>
                    <span>用户界面设计</span>
                </a>
                <a href="yield-prediction.html" class="nav-item">
                    <i class="fas fa-flask"></i>
                    <span>收率预测</span>
                </a>
                <a href="parameter-monitoring.html" class="nav-item">
                    <i class="fas fa-eye"></i>
                    <span>关键参数监控</span>
                </a>
                <a href="online-analysis.html" class="nav-item">
                    <i class="fas fa-chart-bar"></i>
                    <span>在线分析</span>
                </a>
                <a href="model-performance.html" class="nav-item">
                    <i class="fas fa-chart-pie"></i>
                    <span>模型性能</span>
                </a>
                <a href="model-details.html" class="nav-item">
                    <i class="fas fa-info-circle"></i>
                    <span>模型详情</span>
                </a>
                <a href="model-update.html" class="nav-item">
                    <i class="fas fa-sync-alt"></i>
                    <span>模型更新</span>
                </a>
                <a href="model-config.html" class="nav-item">
                    <i class="fas fa-sliders-h"></i>
                    <span>系统配置</span>
                </a>
                <a href="documentation.html" class="nav-item">
                    <i class="fas fa-book"></i>
                    <span>技术文档</span>
                </a>
            </nav>
            <div class="sidebar-footer">
                <div class="user-info">
                    <img src="https://cdn-icons-png.flaticon.com/512/1077/1077114.png" alt="User">
                    <span>管理员</span>
                </div>
                <a href="#" class="logout-btn">
                    <i class="fas fa-sign-out-alt"></i>
                </a>
            </div>
        </div>

        <!-- 主内容区 -->
        <div class="main-content">
            <!-- 顶部导航栏 -->
            <header class="top-bar">
                <div class="page-title">
                    <h1>数据流设计</h1>
                    <p>异烟酸生产收率预测系统的数据采集、处理与流转方案</p>
                </div>
                <div class="top-bar-actions">
                    <div class="search-bar">
                        <i class="fas fa-search"></i>
                        <input type="text" placeholder="搜索...">
                    </div>
                    <div class="notification">
                        <i class="far fa-bell"></i>
                        <span class="badge">3</span>
                    </div>
                    <div class="setting">
                        <i class="fas fa-cog"></i>
                    </div>
                </div>
            </header>

            <!-- 内容区域 -->
            <div class="content-wrapper">
                <!-- 顶部导航链接 -->
                <div class="navigation-links">
                    <a href="model-value.html" class="nav-link">1. 模型应用价值与落地路径</a>
                    <a href="system-architecture.html" class="nav-link">2. 系统架构设计</a>
                    <a href="data-flow.html" class="nav-link active">3. 数据流设计</a>
                    <a href="model-deployment.html" class="nav-link">4. 模型部署与应用</a>
                    <a href="ui-design.html" class="nav-link">5. 用户界面设计</a>
                    <a href="yield-prediction.html" class="nav-link">收率预测</a>
                    <a href="parameter-monitoring.html" class="nav-link">关键参数监控</a>
                </div>

                <div class="secondary-nav">
                    <a href="key-parameter-control.html" class="nav-link">关键参数控制</a>
                </div>

                <!-- 页面内容 -->
                <div class="page-content">
                    <!-- 数据流概述 -->
                    <div class="section-title">数据流程概述</div>
                    
                    <div class="content-card">
                        <div class="content-card-title">
                            <i class="fas fa-stream"></i>
                            整体数据流
                        </div>
                        <p>异烟酸生产收率预测系统的数据流涵盖从数据采集、预处理、存储、特征工程、模型训练到预测结果输出的全流程。系统整合多源异构数据，通过实时和离线处理相结合的方式，为模型训练和推理提供高质量数据支持。</p>
                        
                        <div class="architecture-diagram">
                            <img src="https://via.placeholder.com/800x400?text=异烟酸生产收率预测系统数据流图" alt="数据流图" style="width: 100%; max-width: 800px; margin: 20px auto; display: block;">
                        </div>
                    </div>
                    
                    <!-- 数据来源 -->
                    <div class="section-title">数据来源</div>
                    
                    <div class="info-grid">
                        <div class="info-card">
                            <div class="info-card-icon">
                                <i class="fas fa-industry"></i>
                            </div>
                            <div class="info-card-title">生产设备数据</div>
                            <div class="info-card-text">
                                <ul style="padding-left: 20px; margin-top: 10px;">
                                    <li>反应釜温度、压力、pH值</li>
                                    <li>搅拌速度、流量</li>
                                    <li>加热/冷却系统参数</li>
                                    <li>设备运行状态</li>
                                    <li>采样频率: 10秒/次</li>
                                </ul>
                            </div>
                        </div>
                        
                        <div class="info-card">
                            <div class="info-card-icon">
                                <i class="fas fa-flask"></i>
                            </div>
                            <div class="info-card-title">原料与质量数据</div>
                            <div class="info-card-text">
                                <ul style="padding-left: 20px; margin-top: 10px;">
                                    <li>原料批次信息</li>
                                    <li>原料成分分析</li>
                                    <li>中间产物检测</li>
                                    <li>最终产品质量检验</li>
                                    <li>采样频率: 批次/次</li>
                                </ul>
                            </div>
                        </div>
                        
                        <div class="info-card">
                            <div class="info-card-icon">
                                <i class="fas fa-user-cog"></i>
                            </div>
                            <div class="info-card-title">操作与工艺数据</div>
                            <div class="info-card-text">
                                <ul style="padding-left: 20px; margin-top: 10px;">
                                    <li>操作员操作记录</li>
                                    <li>工艺参数调整</li>
                                    <li>生产配方信息</li>
                                    <li>异常情况记录</li>
                                    <li>采样频率: 事件触发</li>
                                </ul>
                            </div>
                        </div>
                        
                        <div class="info-card">
                            <div class="info-card-icon">
                                <i class="fas fa-thermometer-half"></i>
                            </div>
                            <div class="info-card-title">环境数据</div>
                            <div class="info-card-text">
                                <ul style="padding-left: 20px; margin-top: 10px;">
                                    <li>车间温湿度</li>
                                    <li>大气压力</li>
                                    <li>空气质量</li>
                                    <li>水质参数</li>
                                    <li>采样频率: 1分钟/次</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 数据采集与预处理 -->
                    <div class="section-title">数据采集与预处理</div>
                    
                    <div class="value-cards">
                        <div class="value-card">
                            <div class="value-icon">
                                <i class="fas fa-microchip"></i>
                            </div>
                            <div class="value-content">
                                <div class="value-title">传感器数据采集</div>
                                <div class="value-desc">通过OPC UA和工业物联网网关采集设备传感器数据，支持高频实时数据采集。</div>
                            </div>
                        </div>
                        
                        <div class="value-card">
                            <div class="value-icon">
                                <i class="fas fa-plug"></i>
                            </div>
                            <div class="value-content">
                                <div class="value-title">MES系统集成</div>
                                <div class="value-desc">与制造执行系统集成，获取工单、生产计划、操作记录等生产管理数据。</div>
                            </div>
                        </div>
                        
                        <div class="value-card">
                            <div class="value-icon">
                                <i class="fas fa-vial"></i>
                            </div>
                            <div class="value-content">
                                <div class="value-title">实验室系统对接</div>
                                <div class="value-desc">与LIMS系统对接，自动获取原料、中间产品和最终产品的检验数据。</div>
                            </div>
                        </div>
                        
                        <div class="value-card">
                            <div class="value-icon">
                                <i class="fas fa-filter"></i>
                            </div>
                            <div class="value-content">
                                <div class="value-title">数据过滤与清洗</div>
                                <div class="value-desc">对采集的原始数据进行异常值检测、缺失值处理和噪声过滤，保证数据质量。</div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 数据处理流程 -->
                    <div class="section-title">数据处理流程</div>
                    
                    <div class="flow-diagram">
                        <div class="flow-title">异烟酸生产收率预测数据处理流程</div>
                        <div class="flow-steps">
                            <div class="flow-step">
                                <div class="flow-step-circle">1</div>
                                <div class="flow-step-title">数据采集</div>
                                <div class="flow-step-desc">多源数据采集与同步</div>
                            </div>
                            
                            <div class="flow-step">
                                <div class="flow-step-circle">2</div>
                                <div class="flow-step-title">数据预处理</div>
                                <div class="flow-step-desc">清洗、标准化与对齐</div>
                            </div>
                            
                            <div class="flow-step">
                                <div class="flow-step-circle">3</div>
                                <div class="flow-step-title">特征工程</div>
                                <div class="flow-step-desc">特征提取、选择与转换</div>
                            </div>
                            
                            <div class="flow-step">
                                <div class="flow-step-circle">4</div>
                                <div class="flow-step-title">数据存储</div>
                                <div class="flow-step-desc">按类型分级存储</div>
                            </div>
                            
                            <div class="flow-step">
                                <div class="flow-step-circle">5</div>
                                <div class="flow-step-title">数据应用</div>
                                <div class="flow-step-desc">模型训练与推理</div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 特征工程 -->
                    <div class="section-title">特征工程</div>
                    
                    <div class="content-card">
                        <div class="content-card-title">
                            <i class="fas fa-cubes"></i>
                            特征提取与处理
                        </div>
                        
                        <table class="performance-table">
                            <thead>
                                <tr>
                                    <th>特征类型</th>
                                    <th>处理方法</th>
                                    <th>重要性</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>时序特征</td>
                                    <td>滑动窗口统计、小波变换、时序分解</td>
                                    <td>高</td>
                                </tr>
                                <tr>
                                    <td>统计特征</td>
                                    <td>均值、方差、偏度、峰度、分位数</td>
                                    <td>中</td>
                                </tr>
                                <tr>
                                    <td>域知识特征</td>
                                    <td>基于化学反应动力学的特征构建</td>
                                    <td>高</td>
                                </tr>
                                <tr>
                                    <td>交互特征</td>
                                    <td>参数交叉、多项式特征</td>
                                    <td>中</td>
                                </tr>
                                <tr>
                                    <td>类别特征</td>
                                    <td>独热编码、目标编码、频率编码</td>
                                    <td>中</td>
                                </tr>
                                <tr>
                                    <td>异常特征</td>
                                    <td>异常检测、偏差计算</td>
                                    <td>中</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    
                    <div class="content-card">
                        <div class="content-card-title">
                            <i class="fas fa-chart-pie"></i>
                            特征重要性分析
                        </div>
                        
                        <div class="feature-importance" style="margin-top: 20px;">
                            <div class="feature-item">
                                <div class="feature-name">反应温度稳定性</div>
                                <div class="feature-bar-container">
                                    <div class="feature-bar" style="width: 92%"></div>
                                </div>
                                <div class="feature-value">28.5%</div>
                            </div>
                            <div class="feature-item">
                                <div class="feature-name">原料纯度指标</div>
                                <div class="feature-bar-container">
                                    <div class="feature-bar" style="width: 78%"></div>
                                </div>
                                <div class="feature-value">22.3%</div>
                            </div>
                            <div class="feature-item">
                                <div class="feature-name">催化剂活性</div>
                                <div class="feature-bar-container">
                                    <div class="feature-bar" style="width: 65%"></div>
                                </div>
                                <div class="feature-value">15.8%</div>
                            </div>
                            <div class="feature-item">
                                <div class="feature-name">pH值波动范围</div>
                                <div class="feature-bar-container">
                                    <div class="feature-bar" style="width: 55%"></div>
                                </div>
                                <div class="feature-value">12.4%</div>
                            </div>
                            <div class="feature-item">
                                <div class="feature-name">反应时间</div>
                                <div class="feature-bar-container">
                                    <div class="feature-bar" style="width: 45%"></div>
                                </div>
                                <div class="feature-value">10.2%</div>
                            </div>
                            <div class="feature-item">
                                <div class="feature-name">其他特征</div>
                                <div class="feature-bar-container">
                                    <div class="feature-bar" style="width: 35%"></div>
                                </div>
                                <div class="feature-value">10.8%</div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 数据存储 -->
                    <div class="section-title">数据存储</div>
                    
                    <div class="value-cards">
                        <div class="value-card">
                            <div class="value-icon">
                                <i class="fas fa-database"></i>
                            </div>
                            <div class="value-content">
                                <div class="value-title">实时数据层</div>
                                <div class="value-desc">使用时序数据库(InfluxDB)存储高频实时数据，支持快速读写和时间序列查询。</div>
                            </div>
                        </div>
                        
                        <div class="value-card">
                            <div class="value-icon">
                                <i class="fas fa-server"></i>
                            </div>
                            <div class="value-content">
                                <div class="value-title">历史数据层</div>
                                <div class="value-desc">使用分布式存储(HDFS)保存长期历史数据，支持大规模数据分析和模型训练。</div>
                            </div>
                        </div>
                        
                        <div class="value-card">
                            <div class="value-icon">
                                <i class="fas fa-table"></i>
                            </div>
                            <div class="value-content">
                                <div class="value-title">结构化数据层</div>
                                <div class="value-desc">关系型数据库(PostgreSQL)存储业务数据、配置信息和模型元数据。</div>
                            </div>
                        </div>
                        
                        <div class="value-card">
                            <div class="value-icon">
                                <i class="fas fa-cube"></i>
                            </div>
                            <div class="value-content">
                                <div class="value-title">特征数据层</div>
                                <div class="value-desc">特征存储(Feature Store)集中管理训练和推理特征，确保特征一致性。</div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 数据质量保障 -->
                    <div class="section-title">数据质量保障</div>
                    
                    <div class="content-card">
                        <div class="content-card-title">
                            <i class="fas fa-check-circle"></i>
                            数据质量监控措施
                        </div>
                        <ul style="padding-left: 20px; margin-top: 10px;">
                            <li><strong>实时验证：</strong>对采集数据进行实时有效性验证</li>
                            <li><strong>完整性检查：</strong>监控数据缺失情况并触发补采或插值</li>
                            <li><strong>一致性校验：</strong>跨系统数据一致性校验</li>
                            <li><strong>异常检测：</strong>基于统计和机器学习的异常值检测</li>
                            <li><strong>质量指标：</strong>定期计算数据质量指标评估整体质量</li>
                            <li><strong>数据血缘：</strong>跟踪数据流转全流程，支持溯源分析</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- JavaScript引用 -->
    <script src="scripts/common.js"></script>
    <script src="scripts/main-nav.js"></script>
</body>
</html> 